@import '../../themes/mixins/link';

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 50px 80px;
  user-select: text;

  .closeButton {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    right: 15px;
    top: 15px;

    span {
      height: 44px;
      width: 44px;

      &:hover {
        background-color: var(--theme-about-window-icon-close-hover-background);
        border-radius: 50%;
      }
    }

    svg {
      height: 12px;
      margin-top: 16px;
      width: 12px;

      g {
        stroke: var(--theme-about-window-icon-close-button-color);
      }
    }
  }

  .headerWrapper {
    border-bottom: 1px solid
      var(--theme-about-window-header-bottom-border-color);
    display: flex;
    padding-bottom: 20px;

    .daedalusIcon {
      svg {
        height: 58px;
        margin-top: 14px;
        width: 74px;

        path {
          fill: var(--theme-about-window-daedalus-icon-color);
        }
      }
    }

    .daedalusTitleVersion {
      color: var(--theme-about-window-title-version-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 30px;

      .daedalusTitle {
        font-family: 'Montserrat-Medium';
        font-size: 24px;
        letter-spacing: 6px;
        line-height: 1.33;
        -webkit-text-stroke: 0.5px var(--theme-about-window-title-stroke-color);
        text-transform: uppercase;

        .daedalusVersion {
          font-family: var(--font-regular);
          font-size: 16px;
          font-weight: 300;
          letter-spacing: 0;
          line-height: 1.38;
          -webkit-text-stroke: 0;
        }
      }

      .daedalusBuildInfo {
        font-family: var(--font-regular);
        font-size: 16px;
        font-weight: 300;
        line-height: 1.25;
        margin-top: 6px;

        strong {
          font-family: var(--font-semibold);
          letter-spacing: 0.25px;
        }
      }
    }

    .apiIcon {
      margin-left: 10px;
      margin-top: 45px;

      svg {
        height: 25px;
        width: 25px;

        path {
          fill: var(--theme-about-window-cardano-icon-color);
        }
      }
    }
  }

  .contentText {
    border-bottom: 1px solid
      var(--theme-about-window-content-bottom-border-color);
    color: var(--theme-about-window-content-text-color);
    flex: 1;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
    padding-bottom: 20px;

    h2 {
      color: var(--theme-about-window-content-color);
      font-family: var(--font-semibold);
      margin-bottom: 3px;
    }

    .contentDaedalus {
      margin-bottom: 12px;
    }
  }

  .footerWrapper {
    margin-top: 20px;

    .link,
    .copyright {
      color: var(--theme-about-window-content-text-color);
      font-family: var(--font-regular);
      font-size: 14px;
      line-height: 1.43;
    }

    .link {
      border-color: var(--theme-about-window-content-color);
      &:after {
        background-color: var(--theme-about-window-content-color);
      }
    }

    .copyright {
      margin-top: 6px;
    }
  }
}
